<template>
  <el-dialog
    v-model="deleteVisible"
    v-if="load"
    align-center
    class="Vdialog"
    @close="cancel"
    :close-on-click-modal="false"
  >
    <template #header>
      <h4 class="dialogName">日志</h4>
    </template>
    <div class="content">
      <div class="flex gap-[8px] w-[100%] mb-[16px]" v-if="isSearch">
        <el-date-picker
          v-model="formValue.create_time"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          value-format="YYYY-MM-DD HH:mm:ss"
          style="max-width: 300px"
          :default-time="defaultTime()"
        />
        <select-personnel
          v-model="formValue.create_user"
          placeholder="操作人"
        ></select-personnel>
        <el-input
          v-model="formValue.log_info"
          placeholder="操作内容"
          clearable
          class="h-[32px]"
          style="width: 200px"
        />
        <div class="ml-[auto]">
          <el-button type="primary" @click="query">查询</el-button>
          <el-button @click="handleReset">重置</el-button>
        </div>
      </div>
      <div>
        <vxe-table :data="tableData" :round="true" height="400" :loading="loading">
          <vxe-column field="create_username" title="人员" width="150">
            <template #default="{ row }">
              {{ row.create_username || row.create_user_text || row.create_user }}
            </template>
          </vxe-column>
          <vxe-column field="create_time" title="日期" width="160"></vxe-column>
          <vxe-column field="op_content" title="操作内容">
            <template #default="{ row }">
              <div v-html="row.log_info"></div>
            </template>
          </vxe-column>
        </vxe-table>
      </div>
      <vxe-pager
        v-model:current-page="page.pageNum"
        v-model:page-size="page.pageSize"
        :total="page.totalResult"
        :layouts="[
          'PrevJump',
          'PrevPage',
          'Number',
          'NextPage',
          'NextJump',
          'Sizes',
          'FullJump',
          'Total',
        ]"
        @page-change="pageChange"
      >
      </vxe-pager>
    </div>
    <template #footer>
      <div class="dialog-button">
        <el-button @click="cancel">关闭</el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup name="VLog">
import { reactive, toRefs } from "vue";
const emits = defineEmits(["cancel"]);
// 声明接收参数
const props = defineProps({
  api: { type: Function, default: () => [] },
  options: { type: String, default: "id" },
  isSearch: { type: Boolean, default: true },
});
const loading = ref(false);
const data = reactive({
  deleteVisible: false,
  page: {
    pageNum: 1,
    pageSize: 10,
    totalResult: 0,
  },
  tableData: [],
  ids: 0,
  load: false,
});
const formValue = reactive({
  create_time: [],
  create_user: null,
  log_info: null,
});
const { deleteVisible, page, tableData, ids, load } = toRefs(data);
const { api, options } = toRefs(props);
const open = async (id) => {
  if (!load.value) {
    load.value = true;
    await 1;
  }
  ids.value = id;
  const obj = Object.assign({}, page.value);
  obj[options.value] = id;
  api.value(obj).then((res) => {
    tableData.value = res.data;
    page.value.totalResult = res.total;
  });
  deleteVisible.value = true;
};
const cancel = () => {
  deleteVisible.value = false;
  page.value = {
    pageNum: 1,
    pageSize: 10,
    totalResult: 0,
  };
  emits("cancel");
};

//查询
const query = () => {
  page.value.pageNum = 1;
  pageChange();
};
//分页
const pageChange = () => {
  loading.value = true;
  const { create_time } = formValue;
  let data = {
    ...formValue,
    create_time: {
      start: create_time?.[0],
      end: create_time?.[1],
    },
  };
  api
    .value({
      [options.value]: ids.value,
      pageSize: page.value.pageSize,
      pageNum: page.value.pageNum,
      ...data,
    })
    .then((res) => {
      tableData.value = res.data;
      page.value.totalResult = res.total;
    })
    .finally(() => {
      loading.value = false;
    });
};
const handleReset = () => {
  formValue.create_time = [];
  formValue.create_user = null;
  formValue.log_info = null;
  query();
};
defineExpose({
  open,
  data,
  cancel,
});
</script>
<style lang="scss">
.Vdialog {
  .el-dialog__body {
    padding-top: 16px;
    padding-bottom: 16px;
  }
}
</style>
<style lang="scss" scoped>
.content {
  align-items: center;
  margin: 20px;
}

.dialogName {
  font-size: 16px;
  font-weight: bold;
}

.dialog-button {
  text-align: center !important;
}
:deep(.vxe-pager) {
  height: 40px;
}
.el-button + .el-button {
  margin-left: 8px;
}
</style>
